<template>
    <div class="nodeConfig-container">
        <div class="config-box" v-for="(item, index) in allList" :key="index">
            <h3 class="header-box">{{item.title}}</h3>
            <div class="config-box-item">
                <div v-for="(list, i) in item.item" :key="i">
                    <span>{{list.text}}:</span>
                    <el-input placeholder="请输入内容" v-model="list.value" clearable></el-input>
                </div>
            </div>
        </div>
        <p class="btn-content">
            <el-button type="primary" @click="saveMaster">保存</el-button>
            <el-button @click="returnBack">返回</el-button>
        </p>
    </div>
</template>

<script>
export default {
    methods: {
        saveMaster() {
            //把做数据处理然后上传到服务器
            console.log(this.allList);
        },
        returnBack() {
            this.$router.go(-1);
        }
    },
    //切换面包屑
    created() {
        this.$emit('change', this.$route.name);
    },
    data() {
        return {
            allList: [
                {
                    title: '系统小节',
                    item: [
                        { text: '集群名称', value: 'master' },
                        { text: '节点名称', value: 'master' },
                        { text: '节点编号', value: 'master' },
                        { text: '节点角色', value: 'master' },
                        { text: '工作日录', value: 'master' },
                        { text: '日志文件目录', value: 'master' },
                        { text: '日志文件大小', value: 'master' },
                        { text: '日志折叠个数', value: 'master' },
                        { text: '日志级别', value: 'master' },
                        { text: '启动方式', value: 'master' }
                    ]
                },
                {
                    title: '监听服务',
                    item: [
                        { text: '监听IP', value: 'master' },
                        {
                            text: '监听端口',
                            value: 'master'
                        },
                        {
                            text: '队列大小',
                            value: 'master'
                        },
                        {
                            text: '算法分配',
                            value: 'master'
                        }
                    ]
                },
                {
                    title: '客户端相关配置',
                    item: [
                        { text: '最大连接数', value: 'master' },
                        {
                            text: '最大生产者数',
                            value: 'master'
                        },
                        {
                            text: '最大消费者数',
                            value: 'master'
                        },
                        {
                            text: '最大客户端数',
                            value: 'master'
                        },
                        {
                            text: '单连按最大客户端数',
                            value: 'master'
                        },
                        {
                            text: '单连按最大生产者数',
                            value: 'master'
                        },
                        {
                            text: '单连按最大消费者数',
                            value: 'master'
                        },
                        {
                            text: '单个request最大连接数',
                            value: 'master'
                        }
                    ]
                },
                {
                    title: '处理网络请求服务',
                    item: [
                        { text: '服务个数', value: 'master' },
                        {
                            text: '线程个数',
                            value: 'master'
                        },
                        {
                            text: '接收编中区大小',
                            value: 'master'
                        },
                        {
                            text: '发送缓冲区大小',
                            value: 'master'
                        },
                        {
                            text: '超时时间',
                            value: 'master'
                        },
                        {
                            text: '锁的类型',
                            value: 'master'
                        }
                    ]
                },
                {
                    title: '处理网络应答服务',
                    item: [
                        { text: '服务个数', value: 'master' },
                        {
                            text: '线程个数',
                            value: 'master'
                        },
                        {
                            text: '超时时间',
                            value: 'master'
                        }
                    ]
                },
                {
                    title: '注册服务小节',
                    item: [
                        { text: '服务状态', value: 'master' },
                        {
                            text: '连接列表',
                            value: 'master'
                        },
                        {
                            text: '网卡名称',
                            value: 'master'
                        },
                        {
                            text: '间隔时间',
                            value: 'master'
                        },
                        {
                            text: 'IPv地址',
                            value: 'master'
                        },
                        {
                            text: 'IPv6地址',
                            value: 'master'
                        }
                    ]
                },
                {
                    title: '存储模块小节',
                    item: [
                        { text: '文件目录', value: 'master' },
                        {
                            text: '文件大小',
                            value: 'master'
                        },
                        {
                            text: '磁盘占用率',
                            value: 'master'
                        },
                        {
                            text: '有效措施',
                            value: 'master'
                        }
                    ]
                },
                {
                    title: '消息索引',
                    item: [
                        { text: '目录地址', value: 'master' },
                        {
                            text: '磁盘大小',
                            value: 'master'
                        },
                        {
                            text: '磁盘占有率',
                            value: 'master'
                        },
                        {
                            text: '有效措施',
                            value: 'master'
                        }
                    ]
                },
                {
                    title: '消费历史记录',
                    item: [
                        { text: '文件位置', value: 'master' },
                        {
                            text: '文件大小',
                            value: 'master'
                        },
                        {
                            text: '有效措施',
                            value: 'master'
                        }
                    ]
                },
                {
                    title: '主题小节',
                    item: [
                        { text: '是否自动创建', value: 'mastermaster' },
                        {
                            text: '限制个数',
                            value: 'mastermaster'
                        }
                    ]
                }
            ]
        };
    }
};
</script>

<style scoped>
.nodeConfig-container > div {
    width: 1000px;
    min-height: 200px;
    border: 2px solid lightgrey;
    margin: 20px auto;
    font-size: 14px;
}
.nodeConfig-container .header-box {
    line-height: 35px;
    height: 35px;
    background: #f0f0f0;
    padding-left: 30px;
}
.nodeConfig-container .config-box-item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-around; */
    padding: 30px 0;
}
.nodeConfig-container .config-box-item > div {
    width: 40%;
    margin: 0 5%;
}
.nodeConfig-container .config-box-item > div .el-input {
    margin: 10px 0;
    width: 50%;
}
.nodeConfig-container .config-box-item > div span {
    min-width: 150px;
    display: inline-block;
}

.btn-content {
    width: 1000px;
    margin: 10px auto;
}
</style>